<template>
    <div 
        class="bottonSelfWrap" 
        @click="buttonClick"
        :style="{
            backgroundImage: 'url(' + rectangle + ')',
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
            backgroundRepeat: 'no-repeat'
        }">
        <a class="inletLineCom verMiddle" href="javascript:void(0);">
            <slot></slot>
        </a>
    </div>
</template>
<script type="text/javascript">
import rectangle from "@/assets/rectangle.png"
export default {
    data() {
        return {
            index: 0,
            rectangle: rectangle
        }
    },
    mounted() {

    },
    watch: {

    },
    components: {

    },
    methods: {
        buttonClick() {
            this.$emit('buttonClick')
        }
    }
}
</script>
<style type="text/css" lang="less" scoped>
.bottonSelfWrap {
    display: inline-block;
    padding:7px;
    border-radius: 10px;
    .inletLineCom {
        color: white;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        box-sizing: border-box;
        img,
        span {
            vertical-align: middle;
        }
        img{
            width: 25px;
        }
        span{
            .px2rem(margin-left, 6px);
            font-size: 15px;
        }
    }
}
</style>